<template>
  <div class="echarts">
    <el-row :gutter="24">
      <el-col :span="6">
        <span class="demonstration">类型：</span>
        <el-select clearable v-model="searchForm.taskType" placeholder="全部">
          <el-option
              v-for="item in typeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="12">
        <span class="demonstration">日期：</span>
        <el-date-picker
            clearable
            v-model="searchForm.date"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            :picker-options="pickerOptions"
            end-placeholder="结束日期">
        </el-date-picker>
      </el-col>
      <el-col :span="6">
        <el-button @click="search" type="primary">查询</el-button>
      </el-col>
    </el-row>
    <el-divider></el-divider>
    <el-row :gutter="20">
      <el-col :span="24">
        <div v-if="dataNotNull" id="chart2" :style="{width: '100%', height: '500px'}"></div>
        <el-empty v-else description="未查询到数据"></el-empty>
      </el-col>
    </el-row>
    <el-table
        :data="tableData"
        border
        style="width: 100%">
      <el-table-column
          prop="date"
          label="任务类型"
          align="center">
      </el-table-column>
      <el-table-column
          prop="name"
          label="日期"
          align="center">
      </el-table-column>
      <el-table-column
          prop="address"
          align="center"
          label="开始时间">
      </el-table-column>
      <el-table-column
          prop="address"
          align="center"
          label="执行时间">
      </el-table-column>
      <el-table-column
          prop="address"
          align="center"
          label="车次数">
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
import axios from "axios";
import moment from "moment";

export default {
  name: 'demoCharts',
  data () {
    return {
      dataNotNull: true,
      typeOptions: [
        {
          label: '热倒冷',
          value: 0
        },
        {
          label: '冷倒冷',
          value: 1
        },
      ],
      pickerMinDate: "",
      pickerOptions: {
        onPick: this.onPick,
        disabledDate: this.disabledDate
      },
      searchForm: {
        taskType: null,
        date: [],
        startDay: null,
        endDay: null
      },
      chartData: [],
      chartData2: [],
      chartData3: [],
      chartData4: [],
      results: [],
      option: {
        legend: {
          data: []
        },
        tooltip: {
          trigger: 'axis'
        },
        /*dataZoom:[
          {
            type: "slider", // 在底部
            show: true, // 是否显示 组件。如果设置为 false，不会显示，但是数据过滤的功能还存在。
            start: 30, // 数据窗口范围的起始百分比。范围是：0 ~ 100。表示 0% ~ 100%。
            end: 60, // 数据窗口范围的结束百分比。范围是：0 ~ 100。
            bottom: 10, // 控制滚动条距离底部的位置;
            /!**
             不指定时，当 dataZoom-slider.orient 为 'horizontal'时，
             默认控制和 dataZoom 平行的第一个 xAxis。但是不建议使用默认值，建议显式指定。
             如果是 number 表示控制一个轴，如果是 Array 表示控制多个轴。
             *!/
            xAxisIndex: [0]
          }
        ],*/
        xAxis: {
          type: 'category',
          boundaryGap: false,

          data: [],
          axisLabel:{
            interval: 29
          }
        },
        yAxis: [
          {
            type: 'value',
            name: '执行时间（s）',
            axisLine: {
              symbol: ['none', 'triangle']
            }
          },
          {
            type: 'value',
            name: '车次数',
            position: 'right',
            axisLine: {
              symbol: ['none', 'triangle']
            }
          }
        ],
        series: [
            {
              name: '冷倒冷执行时间',
              type: 'line',
              // color: '#7FFFFF',
              data: [],
              connectNulls: true,
/*              itemStyle: {
                borderWidth: 8,
                borderColor: '#7FFFFF',
              },*/
              symbol: 'circle',
              symbolSize: 10,
              showAllSymbol: true
            },
            {
              yAxisIndex: 1,
              name: '冷倒冷车次数',
              // color: '#7FFFFF',
              type: 'line',
              data: [],
              connectNulls: true,
              symbol: 'circle',
              symbolSize: 10
            },
            {
              name: '热倒冷执行时间',
              type: 'line',
              // color: '#5A7AD5',
              data: [],
              connectNulls: true,
              symbol: 'circle',
              symbolSize: 10
            },
            {
              yAxisIndex: 1,
              name: '热倒冷车次数',
              type: 'line',
              // color: '#5A7AD5',
              data: [],
              connectNulls: true,
              // 拐点处形状
              symbol: 'circle',
              // 拐点处形状大小
              symbolSize: 10
            }
          ],

        animation: false
      },
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }],
      dataVal: {
        "first": [
          {
            "time": "2022-12-01 08:00",
            "execTime": 5
          },
          {
            "time": "2022-12-01 08:05",
            "execTime": 9
          },
          {
            "time": "2022-12-01 08:10",
            "execTime": 15
          },
          {
            "time": "2022-12-01 08:15",
            "execTime": 3
          },
          {
            "time": "2022-12-01 09:01",
            "execTime": 10
          },
          {
            "time": "2022-12-01 10:02",
            "execTime": 30
          },
          {
            "time": "2022-12-01 12:10",
            "execTime": 5
          },
          {
            "time": "2022-12-01 13:15",
            "execTime": 6
          },
          {
            "time": "2022-12-01 15:23",
            "execTime": 6
          }
        ],
        "second": [
          {
            "time": "2022-12-01 08:02",
            "number": 50
          },
          {
            "time": "2022-12-01 08:15",
            "number": 25
          },
          {
            "time": "2022-12-01 08:30",
            "number": 1
          },
          {
            "time": "2022-12-01 09:15",
            "number": 57
          },
          {
            "time": "2022-12-01 09:45",
            "number": 20
          }
        ],
        "third": [
          {
            "time": "2022-12-01 09:02",
            "number": 10
          },
          {
            "time": "2022-12-01 09:22",
            "number": 15
          },
          {
            "time": "2022-12-01 10:22",
            "number": 12
          },
          {
            "time": "2022-12-01 15:22",
            "number": 6
          },
          {
            "time": "2022-12-01 18:22",
            "number": 20
          }
        ],
        "forth": [
          {
            "time": "2022-12-01 10:22",
            "number": 8
          },
          {
            "time": "2022-12-01 13:22",
            "number": 10
          },
          {
            "time": "2022-12-01 16:22",
            "number": 12
          },
          {
            "time": "2022-12-01 17:22",
            "number": 3
          },
          {
            "time": "2022-12-01 18:22",
            "number": 25
          }
        ]
      }
    }
  },
  mounted () {
    this.getX();
/*    axios.get('http://localhost:8081/file/demoFile.json').then(res => {
      console.log('=-----', res.data)
      this.chartData = res.data.first;
      this.chartData2 = res.data.second;
      this.chartData3 = res.data.third;
      this.chartData4 = res.data.forth;

    }).finally(() => {
      this.draw2()
    })*/
    this.chartData = this.dataVal.first;
    // this.chartData2 = this.dataVal.second;
    // this.chartData3 = this.dataVal.third;
    // this.chartData4 = this.dataVal.forth;
    this.draw2()
  },
  methods: {
    search() {
      console.log('===', this.searchForm)
      // this.dataNotNull = true
      this.getX();
      this.draw2()
    },
    onPick({ maxDate, minDate }) {
      this.pickerMinDate = minDate.getTime();
      if (maxDate) {
        this.pickerMinDate = "";
      }
    },
    disabledDate(time) {
      if (this.pickerMinDate) {
        let maxTime = moment(this.pickerMinDate).add(31, "days");
        let minTime = moment(this.pickerMinDate).subtract(31, "days");
        if (maxTime > new Date()) {
          maxTime = new Date();
        }
        return time.getTime() > maxTime || time.getTime() < minTime;
      }
      return time.getTime() > Date.now();
    },
    // x轴数据格式化
    timeFormat(val, flag) {
      if (flag) {
        return moment(val).format("MM-DD")
      } else {
        return moment(val).format("HH:mm")
      }
    },
    getX() {
      this.results = [];
/*      if (this.searchForm.date && this.searchForm.date.length !== 2) {
        this.dataNotNull = false;
        return;
      }*/
      let flag = false;
      // let startTime = new Date(this.searchForm.date[0]);
      // let endTime = moment(new Date(this.searchForm.date[1])).add(1, 'day');
      let startTime = new Date("2022-12-01 1:00:00");
      let endTime = new Date("2022-12-01 24:00:00");

      // 判断日期间隔是否超过1天
      // console.log('======', moment(endTime).diff(startTime, 'day'));
      if (moment(endTime).diff(startTime, 'day') > 1) {
        this.option.xAxis.axisLabel.interval = 1439
        flag = true;
      }
      startTime = moment(new Date(startTime));
      this.results.push(this.timeFormat(startTime, flag))
      while (moment(startTime).isBefore(endTime)) {
        startTime = moment(startTime).add(1, 'minute');
        this.results.push(this.timeFormat(startTime, flag))
      }
      console.log('======---', this.results);
    },
    draw2() {
      console.log('==1111===', this.chartData)
      this.chartData.forEach(it => {
        let arr = [this.timeFormat(it.time.toString(), false), it.execTime]
        this.option.series[0].data.push(arr)
      })
      this.chartData2.forEach(it => {
        let arr = [this.timeFormat(it.time.toString(), false), it.number]
        this.option.series[1].data.push(arr)
      })
      this.chartData3.forEach(it => {
        let arr = [this.timeFormat(it.time.toString(), false), it.number]
        this.option.series[2].data.push(arr)
      })
      this.chartData4.forEach(it => {
        let arr = [this.timeFormat(it.time.toString(), false), it.number]
        this.option.series[3].data.push(arr)
      })
      this.option.xAxis.data = [];
      this.option.xAxis.data = [...this.results];
      this.option.series.forEach(it => {
        this.option.legend.data.push(it.name)
      })
      console.log('====', this.option)
      let myChart = this.$echarts.init(document.getElementById('chart2'))
      myChart.setOption(this.option)
    },
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
/deep/ .picker-date .el-picker-panel__body-wrapper{
      display: none !important;
}
</style>
